<template>
  <div class="container">
    <div class="upload-box">
      <div class="reset-back">
        <!-- 修改数据 -->
        <!-- <div v-show="isShowStepOne" class="link" @click="changLogData">{{$t('page.modData')}}</div> -->
        <!-- 清空数据 -->
        <span v-show="isShowStepOne" class="link" @click="handleRemove">{{$t('page.emptyData')}}</span>
        <span v-show="isShowResult" class="link" @click="handleParameters">修改参数</span>
      </div>
      <!-- 第一个上传 -->
      <div style="text-align: center;"
        v-show="isShowExcel === 'excel1' || isShowExcel === 'true'">
        <!-- <h4 
          v-show="isShowUpload"
          style="text-align: center;"
        >{{$t('page.entrance1')}}</h4> -->
        <el-upload 
          ref="rebateUpload"
          class="upload-demo"
          drag
          action="aa"
          name="excel"
          :limit="1"
          :before-upload="beforeUpload"
          :headers="headerUpload"
          accept=".zip,.xlsx"
          :http-request="UploadImage"
          :on-remove="removeFile1"
          :show-file-list="false"
          :on-error="handleError"
          v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
        </el-upload>
        
        <div class="upload-name-box">
          <!-- 上传文件名字 -->
          <div class="upload-name"
            v-show="isShowUploadtxt">
            {{uploadFile.name }}
            <el-button type='text'
              @click="removeFile1()">x</el-button>
          </div>
          <!-- 加载进度条 -->
          <el-progress 
            :percentage="percentage"
            :color="customColor"
            v-show="isShowPer"
            >
          </el-progress>
          <!-- v-show="isShowPer" -->
        </div>
      </div>

      <!-- 第二个上传 -->
      <!-- <UploadFile 
        ref="secondUpload"
        v-show="isShowExcel === 'excel2' || isShowExcel === 'true'"
        @uploadExcel2="uploadExcel2"
        @removeFile="removeFile"
      ></UploadFile> -->
    </div>

    <!-- 上传按钮 -->
    <div class="upload-btn" v-show="isShowUploadtxt && !isShowResult && !isShowStepOne">
      <el-button
        type="primary" 
        :loading="isLoading"
        @click="uploadHandler"
      >{{$t('page.uploadText')}}</el-button>
    </div>

    <div 
      class="container-body"
      v-show="isShowStepOne">
      <template>
        <div class="title-space">
          <span>{{$t('page.ODvalue')}}：</span>
        </div>
        <div>
          <div class="overflow">
            <!-- 大 - 数据表格 -->
            <table id="table-1">
              <tr v-for="(item, key, index) in charData" :key="index">
                <td>{{ key }}</td>
                <!-- 浓度 -->
                <td v-for="(sub, subIndex) in item" :key="subIndex">
                  {{ sub }}
                </td>
              </tr>
            </table>
          </div>

          <div class="space"
                v-if="dissType === 'v1'">
            <div class="title-space">
              <span>{{$t('page.ODrate')}}（%）： </span>
            </div>

            <div class="overflow"
                  v-for="(lightRateItem,lightRateIndex) in lightRate" :key="lightRateIndex">
              <table id="table-1">
                <tr v-for="(table,key,index) in lightRateItem"
                    :key="index">
                  <td class="color-000">{{key!=='time'?key:$t('page.hole')}}</td>
                  <td>
                    <span v-if="key!=='time'">
                      {{beforeLable[index-1]}}{{unit}}
                    </span>
                    <span class="color-000"
                          v-else>
                      {{$t('page.parameter')}}
                    </span>
                  </td>
                  <td v-for="(iTable, index) in table" :key="index">
                    <span v-if="key!=='time'">{{iTable}}</span>
                    <span class="color-000"
                          v-else>{{iTable + 's'}}</span>
                  </td>
                </tr>
              </table>
            </div>
          </div>

          <!-- 线型echarts -->
          <linePointDiagram 
            style="margin-top: 40px"
            :value="resultFormatValue"
            :title="$t('page.originalFigure')"
            @generateImg="shotImg(0, $event)"
          ></linePointDiagram>

          <!-- 操作图，拖拽截取 -->
          <ul class="addBtn">
            <li @click="handleAdd(0.1, '#ff0000', '基线')">基线</li>
            <li @click="handleAdd(1, '#00B0F0', '结合')">结合</li>
            <li @click="handleAdd(2, '#FD5C0C', '解离')">解离</li>
            <li class="submit_btn" @click="isShowInputLog = true">提交</li>
          </ul>
          <interceptPage
            :lineData="charData"
            :moveingMark="moveingMarkLines"
            :moveLineList="moveList"
            @handleChange="handleChange"
            @shotImg="shotImg(1, $event)"
          ></interceptPage>
          <table class="intercept_table" border="1" cellpadding="12">
            <thead>
              <tr>
                <td>颜色</td>
                <td>名称</td>
                <td>数值</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in moveingMarkLines" :key="index">
                <td><span class="color_block" :style="{backgroundColor: item.color}"></span></td>
                <td>{{ item.id.indexOf('1') > -1 ? `${item.id.slice(0, -1)}结束` : `${item.id}开始` }}</td>
                <td>
                  <el-input-number 
                    v-model="item.x" 
                    @change="item.x=item.x.toFixed(2)" 
                    :min="0" 
                  ></el-input-number>
                </td>
              </tr>
            </tbody>
          </table>

          <div style="text-align: center;" >
            <div class="completeBox">
              <div class="complete_Item" v-for="(item, index) in moveList" :key="item.key">
                <h4>
                  {{$t('page.holeName')}}:
                  <span class="round" :style="{backgroundColor: colors && colors[index]}"></span>
                  {{ item.name }}</h4>
                <p>
                  <span>移动：</span>
                  <el-input-number 
                    :precision="2"
                    :step="1"
                    v-model="item.num" 
                    @keyup.native="item.num=item.num.replace(/[^0-9]/g,'')"
                    :min="0" 
                  ></el-input-number>
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 结果页面 -->
    <ResultPage 
      v-show="isShowResult"
      :computedResultValue="resultValue"
      :baseStepImg="baseStepOne"
    ></ResultPage>

    <!-- -输入配置参数数据-弹窗 -->
    <el-dialog 
      :visible.sync="isShowInputLog"
      :close-on-click-modal="false"
      width="70%"
      top="5%"
      center>
        <div>
          <div 
            class="space"
            style="margin-bottom: 10px;">
            <div class="space-title">{{$t('page.module')}}：</div>
            <el-checkbox-group v-model="graphicalList">
              <el-checkbox label="1">{{ $t('page.originalFigure') }}</el-checkbox>
              <el-checkbox label="2">{{ $t('page.ZeroFigure') }}</el-checkbox>
              <el-checkbox label="3">{{ $t('page.dissociationData') }}</el-checkbox>
            </el-checkbox-group>
          </div>
        <!-- 公式选择 -->
        <div class="space" style="margin-top:20px;">
          <div class="space-title">{{$t('page.formula')}}：</div>
          <el-radio-group v-model="formulaValue">
            <el-radio :label="0">{{$t('page.default')}}</el-radio>
            <el-radio :label="1">{{$t('page.newFormula')}}</el-radio>
          </el-radio-group>
        </div>
        <!-- 分子量 -->
        <div class="space">
          <div class="title-space">
            <div class="space-title">{{$t('page.molecular')}}（Da）：</div>
            <el-input 
              type="number"
              class="input"
              v-model="mole"
              style="width:300px;">
            </el-input>
          </div>
        </div>
        <!-- 是否归零 -->
        <div class="space" style="margin: 0 0 20px 0">
          <div class="space-title">{{$t('page.zeroProcess')}}：</div>
          <el-radio v-model="zero" label='0'>{{$t('page.zero')}}</el-radio>
          <el-radio v-model="zero" label="1">{{$t('page.noZero')}}</el-radio>
        </div>
        <!-- 是否优化 -->
        <div class="space" style="margin-bottom: 20px;">
          <div class="space-title">{{$t('page.fit_opt')}}：</div>
          <el-radio v-model="fitting" :label='0'>{{$t('page.default')}}</el-radio>
          <el-radio v-model="fitting" :label="1">{{$t('page.optimization')}}</el-radio>
        </div>

        <div class="space-btn">
          <el-button 
            type="primary"
            @click="handleCompute"
            size="small"
            :loading="computeLoading"
            class="btn-submit-color">
              {{$t('page.submit')}}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import waveChart from '@/components/WaveChart'
import { weSprStep2Test, weSprStep1Test } from '@/api/table'
import { setStore, getStore } from '@/utils/common'
import { getToken } from '@/utils/auth'
import store from '@/store'
// import UploadFile from './uploadFile.vue'
import { COLORLIST } from '@/utils/variate'
import Saccharose from './saccharose'
import ResultPage from './result.vue'
import interceptPage from './interceptPage'
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'

export default {
  data() {
    return {
      colors: COLORLIST,
      graphicalList: ['1', '2', '3'],
      originalData: [],
      // originalDataRate: [],
      lightRate: [],
      // markLineValue: null,
      // stepTwoList: [],
      computeLoading: false, //显示计算loading
      // computeAllowed: true, //防连点
      isShowInputLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowResult: false,  // 结果页面
      isShowStepTwo: false, //是否显示第二步表格
      // showScreenshotsImg: true, //页面上的曲线隐藏
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      // mole: '115207373',
      unit: 'μg/ml',
      unitOption: ['pg/ml', 'ng/ml', 'μg/ml', 'mg/ml'],
      isShowPer: false,
      percentage: 10,
      customColor: '#e6a23c',
      // allLightRateCharts: [],
      // allStepOneCharts: [],
      isRepeatSubmit: false,
      // extA: '',
      // imgList: '',
      lang: getStore('spr-lang') || 'zh', // 语言类型
      // unitTitle: [],
      parameter: [],
      waveName: [],      // 浓度数据
      beforeLable: [],  // 标签数据
      baseStepOne: [],
      doDownload: false,
      // paramResult: [],
      dissociation: [],   // 结合解离标识线数据
      sprone_dissociation: [],  // 原始、归零 标识线数据
      dissType: '',
      // formulaValue: 0, // 公式选择
      uploadExcel: {
        excel1: null, // 上传的第一个表格
        excel2: null, // 上传的第二个表格
      },
      isShowExcel: 'true', // 判断展示哪个上传
      isLoading: false, // 上传按钮loading
      // tooltipList: [],  // 用于echarts的tooltip数组
      // colorList: COLORLIST, // 颜色列表
      // reductionWater: [] ,// 蔗糖减水全光谱
      // subtract: [],   // 光谱差
      zero: '0',   // 是否归零
      formulaValue: 0, // 公式选择
      mole: '115207373',
      // paramResult: [], // 分子量表格
      // fittedingList: [],
      // 是否全填
      // isComplete: true,
      
      fitting: 0,
      
      resultValue: {},   // 计算之后的结果
      completeList: [],
      charData: {}, // 图形数据
      moveList: [],
      moveingMarkLines: [
        // {
        //   id: "L1",
        //   x: 50,
        //   backgroundColor: "rgba(0, 193, 255, 0.2)",
        //   color: "#00b0f0",
        // },
      ],
      jiehejieliList: [],
      jixians: [],
      resultFormatValue: {}
    }
  },
  components: {
    interceptPage,
    ResultPage,
    Saccharose,
    linePointDiagram
  },
  methods: {
    handleAdd(index = 0, color, name) {
      const isExist = this.moveingMarkLines.some(item => item.id === name)
      if(isExist) return

      this.moveingMarkLines.push({
        id: name,
        x: (index * 50).toFixed(2),
        backgroundColor: this.hex2Rgba(color),
        color: color,
      })
      this.moveingMarkLines.push({
        id: name + '1',
        x: (index * 100).toFixed(2),
        backgroundColor: this.hex2Rgba(color),
        color: color,
      })
    },
    hex2Rgba(bgColor, alpha = 0.2) {
      let color = bgColor.slice(1); // 去掉'#'号
      let rgba = [
        parseInt("0x" + color.slice(0, 2)),
        parseInt("0x" + color.slice(2, 4)),
        parseInt("0x" + color.slice(4, 6)),
        alpha
      ];
      return "rgba(" + rgba.toString() + ")";
    },
    handleChange(positions) {
      this.jiehejieliList = this.completeList.map(item => {
        const isExistjixian = positions.some(lineItem => lineItem.id === '基线')
        if(isExistjixian) {
          const jiehe_start = positions[2]?.x < positions[3]?.x ? positions[2]?.x : positions[3]?.x
          const jiehe_end = positions[3]?.x > positions[2]?.x ? positions[3]?.x : positions[2]?.x
          const jieli_start = positions[4]?.x < positions[5]?.x ? positions[4]?.x : positions[5]?.x
          const jieli_end  = positions[5]?.x > positions[4]?.x ? positions[5]?.x : positions[4]?.x
        
          return {
            name: item.key,
            jiehe_start,
            jiehe_end,
            jieli_start,
            jieli_end
          }
        }
      })
      this.jixians = this.completeList.map(item => {
        const isExistjixian = positions.some(lineItem => lineItem.id === '基线')
        if(isExistjixian) {{
          const jixian_start = positions[0]?.x < positions[1]?.x ? positions[0]?.x : positions[1]?.x
          const jixian_end = positions[1]?.x > positions[0]?.x ? positions[1]?.x : positions[0]?.x
        
          return {
            name: item.key,
            start: jixian_start,
            end: jixian_end,
          }
        }}
      })
    },
    handleParameters() {
      this.isShowStepOne = true
      this.isShowResult = false
    },
    setListItem(data) {
      const obj = {}
      const obj1 = {}
        for (const k in data) {
          if ("time" === k) {
            obj[k] = data[k]            
          } else {
            obj1[k] = data[k]
          }
        }
      return {...obj, ...obj1}
    },

    // 点击上传按钮
    async uploadHandler() {
      this.isLoading = true
      let formData = new FormData()
      formData.append('type', 'formData')
      let { excel1, excel2} = this.uploadExcel
      if(excel1 && excel2) {
        formData.append('excel', excel1)
        formData.append('excel1', excel2)
        // isShowExcel = 'true'
      } else if (excel1 || excel2) {
        for (const k in this.uploadExcel) {
          if (this.uploadExcel[k]) {
            this.isShowExcel = k
            formData.append('excel', this.uploadExcel[k])
          }
        }
      } else {
        this.isLoading = false
        return this.$message.warning('请先上传文件')
      }
      try{
        const res = await weSprStep1Test(formData)
        this.uploadSuccess(res)
      }catch(err) {
        console.log(err);
      }
      this.isLoading = false
    },

    // 第一个上传
    UploadImage(data) {
      this.uploadExcel.excel1 = data.file
      this.percentage = 100
      setTimeout(() => {
        this.isShowPer = false
      }, 500)
    },

    /* 第二个上传回调 */
    // uploadExcel2(value) {
    //   this.uploadExcel.excel2 = value
    // },
    // 第二个上传移除文件
    // removeFile() {
    //   if(this. isShowExcel !== 'true') {
    //     return this.handleRemove()
    //   }
    //   this.uploadExcel.excel2 = null
    // },
    // 第一个移除文件
    removeFile1() {
      if(this. isShowExcel !== 'true') {
        return this.handleRemove()
      }
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadFile = {}
      // 是否显示上传组件
      this.isShowUpload = true
      // 文件名字
      this.isShowUploadtxt = false
      // 清空修改按钮
      // this.isShowStepOne = false
       //上传进度条
      this.percentage = 0

      // 结果页面
      this.isShowResult = false
    },


    // goNext(route, type) {
    //   if (type === 1) {
    //     setStore('chartData', this.lightRate)
    //   }
    //   this.$router.push({ path: route })
    // },

    // 修改数据-点击出现弹窗
    // changLogData() {
    //   this.isRepeatSubmit = true
    //   this.isShowInputLog = true
    //   this.doDownload = false
    //   this.beforeLable = []
    // },

    beforeUpload(file) {
      // const isZip = file.name.endsWith('zip');
      // if(!isZip) {
      //   return this.$message.error('上传文件仅支持zip格式')
      // }
      this.uploadFile = file
      this.isShowPer = true   // 进度条
      this.isShowUpload = false  // 上传框隐藏
      this.isShowUploadtxt = true  // 显示文件名字
      this.percentage += 60 + Math.floor(Math.random() * 10)
    },
    uploadSuccess(file) {
      if (file.status === 200) {
        let chartObj = {}
        for (const k in file.data.data) {
          if (k !== 'time') {
            chartObj[k] = file.data.data[k];
          }
        }
        this.charData = chartObj
        this.resultFormatValue = {
          ...formatData(file.data.data)
        }
        this.isShowStepOne = true
        // 处理 详情底部结合解离点 数量
        this.completeList = []
        this.isShowPer = false
        for (const k in file.data.data) {
          if(k === 'time') return
          // 移动部分
          this.moveList.push({
            name: k,
            num: '0'
          })
          // 结合解离部分
          if(k.indexOf('ref') > -1 ) continue
          this.completeList.push({
            key: k,
            start_jiehe: '0',
            end_jiehe: '0',
            start_jieli: '0',
            end_jieli: '0'
          })
        }

        setStore('auuid', file.data.uuid)
      } else {
        if (file.status === 502) {
          this.$msgbox
            .confirm(this.$t('page.msgBoxLoginOut'), this.$t('page.loginOut'), {
              confirmButtonText: this.$t('page.loginAgin'),
              cancelButtonText: this.$t('page.cancel'),
              type: 'warning',
            })
            .then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()
              })
            })
        } else {
          this.$message.error(file.msg)
        }
      }
    },

    // 上传失败
    handleError() {
      this.$message.error('上传失败')
    },

    /* 提交信息 */
    async handleCompute() {
        this.computeLoading = true
        // this.showScreenshotsImg = true
        // this.baseStepOne = []

        // this.isShowInputLog = true
        let info = null
        // const lableList = this.waveName.map((item, index) => this.beforeLable[index] || null)
        // 请求参数
        const reqParams = {
          valueDto: {
            uuid: getStore('auuid'),
            zero: this.zero,
            formulas: this.formulaValue,
            isRepeatSubmit: false,
            mole: this.mole,
            fit_opt: this.fitting,
            imageSwitcher: this.graphicalList,
          },
          uuid: getStore('auuid'),
          dtoList: this.moveList,
          jiehejielis: this.jiehejieliList,
          jixians: this.jixians,
          // .map(item => {
          //   return {
          //     name: item.key,
          //     jiehe_start: item.start_jiehe,
          //     jiehe_end: item.end_jiehe,
          //     jieli_start: item.start_jieli,
          //     jieli_end: item.end_jieli
          //   }
          // })
        }
        try {
          info = await weSprStep2Test(reqParams)
        } catch (err) {
          console.log(err);
        }
        if (info && info.status === 200) {
          this.resultValue = info.data
          let _this = this
          _this.$nextTick(() => {
            setTimeout(() => {
              // _this.imgUpLoad(info.data.computeCrpValue.value)
              _this.doDownload = true
            }, 3000)
          })

          this.isShowResult = true
          this.isShowInputLog = false
          this.isShowStepOne = false
          // this.isShowStepTwo = true
        } 
        this.computeLoading = false
        this.isShowLoading = false
        this.isResetLoading = false
    },

    /* 生成excali表格 */
    // async imgUpLoad(value) {
    //   await fetchUploadExl({
    //     crpValue: value,
    //     uuid: getStore('auuid'),
    //     imgBase64: this.baseStepOne,
    //   })
    // },

    // 全部清楚数据
    handleRemove() {
      this.$refs['rebateUpload'].clearFiles() //清除文件
      this.uploadExcel.excel1 = null  //清除文件
      this.uploadExcel.excel2 = null  //清除文件
      this.uploadFile = {}
      this.isShowExcel = 'true'

      // 调用子组件清除文件
      // this.$refs.secondUpload.handleRemove()

      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //可以计算
      // this.computeAllowed = true
      this.computeLoading = false
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      // this.paramResult = []
      this.originalData = []
      // this.stepTwoList = []
      // this.allStepOneCharts = []
      this.isShowStepOne = false
      this.isShowStepTwo = false
      this.isShowInputLog = false
      this.doDownload = false
      this.baseStepOne = []
      this.beforeLable = []
      this.isShowResult = false
      this.moveList = []
      this.moveingMarkLines = []
      this.jiehejieliList = []
    },

    // sortObj(obj) {
    //   var arr = []
    //   for (var i in obj) {
    //     arr.push([obj[i], i])
    //   }
    //   arr.reverse()
    //   var len = arr.length
    //   var obj = {}
    //   for (var i = 0; i < len; i++) {
    //     obj[arr[i][1]] = arr[i][0]
    //   }
    //   return obj
    // },

    downloadExl() {
      if (this.isShowStepTwo && this.doDownload) {
        let lang = this.lang === 'zh' ? 'CN' : 'ENG'
        const href = `${
          process.env.BASE_URL
        }receive/download/excel/6/${lang}/${getStore('auuid')}`
        window.open(href, '_blank')
      } else {
        this.$message({
          type: 'error',
          message: this.$t('page.doDownload'),
        })
      }
    },

    opens() {
      setTimeout(() => {
        let triggerResize = new Event('resize')
        window.dispatchEvent(triggerResize)
      }, 0)
    },

    shotImg(index, data) {
      this.baseStepOne[index] = data
    },
  },
  computed: {
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog--center .el-dialog__body {
    display: flex;
    justify-content: center;
  }
  .el-progress-bar {
    width: 100px;
    padding: 0;
    margin: 0;
  }
}
.intercept_table {
  width: 100%;
  border-color: #ebeef5;
  margin: 40px 0;
  thead tr {
    background-color: #eef1f6;
    font-weight: 700;
    font-size: 18px;
    color: #606266;
  }
  tbody tr {
    font-size: 16px;
    font-weight: 700;
    color: #606266;
    .color_block {
      width: 20px;
      height: 20px;
      display: inline-block;
    }
  }
}

.completeBox {
  height: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  .complete_Item {
    display: inline-block;
    margin-right: 30px;
    text-align: center;
    .round {
      display: inline-block;
      margin-right: 5px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      .el-input {
        width: 200px;
      }
    }
  }
}
.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.addBtn {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  li {
    padding: 10px 30px;
    border-radius: 6px;
    margin-left: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }
  li:nth-child(1) {
    background-color: #ff0000;
  }
  li:nth-child(2) {
    background-color: #00B0F0;
  }
  li:nth-child(3) {
    background-color: #FD5C0C;
  }
  .submit_btn {
    padding: 10px 60px;
    background-color: #409eff;
    border-radius: 6px;
  }
}
.upload-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  /deep/ .el-button--primary {
    width: 160px;
  }
}
.space {
  display: flex;
  margin: 0;
  .space-title,
  .label-title {
    width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .space-title::before {
    content: '*';
    color: red;
    margin-right: 2px;
  }
}
.space-unit {
  margin-bottom: 20px;
}
.space-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  // margin-left: 250px;
}
table {
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}
.reset-back {
  display: flex;
  align-items: center;
  // margin: 0 20px 20px;
  .link {
    cursor: pointer;
    color: #409eff;
    font-style: normal;
    margin-right: 20px;
  }
}
.img-list {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  width: 500px;
}

#table-2 {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #000;
}
#table-2 tr {
  border: 1px solid #000 !important;
}

#table-2 td:first-child {
  border-left: 1px solid #000;
}

// 计数器部分的样式
.each-numberBox {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .computed-text {
    width: 80px;
    margin-right: 6px;
    text-align: end;
    .computed-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
  }
}

/* Padding and font style */
#table-2 td,
#table-2 th {
  padding: 10px 15px;
  font-size: 12px;
  font-family: Verdana;
  border-right-width: 1px;
  border-right-style: solid;
}

.data-item {
  display: block;
}

@media screen and (min-width: 1000px) {
  .data-item {
    display: inline-block;
    margin-right: 20px;
  }
}
.space-time {
  display: flex;
}
</style>